<template>
  <el-form :rules="rules" class="login-container" label-position="left"
            v-loading="loading" :model="loginForm" ref="loginForm">
    <h3 class="login_title">部门发文系统登录</h3>
    <el-form-item prop="mail" label="邮箱" label-width="50px">
      <el-input type="text" v-model="loginForm.mail" auto-complete="off" placeholder="邮箱"></el-input>
    </el-form-item>
    <el-form-item prop="password" label="密码" label-width="50px">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
   <!-- <el-form-item  label="自动登录" label-width="50px">
      <el-input type="checkbox" v-model="loginForm.remember-me" ></el-input>
    </el-form-item>-->
    <el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>
    <el-form-item>
      <span sytle="color:#606266">默认密码:123456</span>
    </el-form-item>
    
    <el-form-item style="width: 100%">
      <el-button type="primary" @click.native.prevent="submitClick('loginForm')" style="width: 100%">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import {postRequest} from '../api/api'
  import {putRequest} from '../api/api'
  import {getRequest} from '../api/api'
  import {loadCurrentUser} from '../util/common'

  export default{
    data(){
      return {
        rules: {
          mail: [{required: true, message: '请输入邮箱号', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}]
        },
        checked: true,
        loginForm: {
          mail: '',
          password: '',
          //remember-me:null
        },
        loading: false
      }
    },
    mounted(){
      this.getCookie();
    },
    methods: {
      submitClick(loginForm) {
        var _this = this;
        if(this.checked == true){
          //传入账号，密码，保存天数3个参数
          this.setCookie(this.loginForm.mail,this.loginForm.password,7);
        }else{
          this.clearCookie();
        }
        this.loading = true;
        this.$refs[loginForm].validate((valid)=>{
          if(valid){
            postRequest('/login', {
              mail: this.loginForm.mail,
              password: this.loginForm.password
              //remember-me: this.loginForm.remember-me
            }).then(resp=> {
              _this.loading = false;
              if (resp.status == 200) {
                
                if (resp.data.code === 1000) {
                  sessionStorage.setItem("isLogin",true);
                  loadCurrentUser(_this);
                  
                } else {
                  _this.$alert(resp.data.data, '失败!');
                }
              } else {
                //失败
                _this.$alert('登陆失败!', '失败!');
              }
            }, resp=> {
              _this.loading = false;
              _this.$alert('找不到服务器⊙﹏⊙∥!', '失败!');
            });
          }else{
            _this.loading = false;
            _this.$alert("请输入账号密码!","失败！");
          }
        })
        
      },
      //设置cookie
      setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date(); //获取时间
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
        //字符串拼接cookie
        window.document.cookie =
          "mail" + "=" + c_name +";path=/;expires=" + exdate.toGMTString();
        window.document.cookie = "password" + "=" + c_pwd +";path=/;expires=" + exdate.toGMTString();
      },
      getCookie: function() {
        if (document.cookie.length > 0) {
          var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
          for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split("="); //再次切割
            //判断查找相对应的值
            if (arr2[0] == "mail") {
              this.loginForm.mail = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == "password"){
              this.loginForm.password = arr2[1];
            }
          }
        }
      },
      //清除cookie
      clearCookie: function() {
        this.setCookie("", "", -1); //清空前两个值，天数为负1天就好了
      },
    
    },
  }
</script>
<style>
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .login_remember {
    margin: 0px 0px 0px 0px;
    text-align: left;
  }
</style>
